<!doctype html>
<html>
  <head>
    <title>{{$.Dashboard.Name}} Dashboard</title>
    <link rel="stylesheet" href="/static/style.css"/>
    <style>
      .graph-container { background: #eee; }
    </style>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawCharts);
      function drawCharts() {
        var data = new google.visualization.DataTable();
        data.addColumn({type: 'number', label: 'Commit'});
        data.addColumn({type: 'number'});
        data.addColumn({type: 'string', role: 'tooltip'});
        {{range $.Headers}}
          data.addColumn({type: 'number', label: '{{.}}'});
          data.addColumn({type: 'boolean', role: 'certainty'});
          data.addColumn({type: 'string', role: 'tooltip'});
          data.addColumn({type: 'string', role: 'annotation'});
        {{end}}
        data.addRows([
        {{range $.Commits}}
          [ {{.Id}}, 1, "{{.Name}}",
            {{range .Vals}}
              {{if .Val}}
                {{.Val}}, {{.Certainty}}, '{{.Hint}}', '{{.Ann}}',
              {{else}}
                ,,,,
              {{end}}
            {{end}}
          ],
        {{end}}
      ]);
      new google.visualization.LineChart(document.getElementById('graph_div')).
        draw(data, {
          width: "100%",
          height: 700,
          legend: {position: "bottom"},
          focusTarget: "category",
          hAxis: {textPosition: "none"},
          chartArea: {left: "10%", top: "5%", width: "85%", height:"80%"},
          explorer: {axis: 'horizontal', maxZoomIn: 0, maxZoomOut: 1, zoomDelta: 1.2, keepInBounds: true}
        })
      }
    </script>
</head>
<body>
 
   <header id="topbar">   
    <h1>Go Dashboard</h1>
    <nav>
        <a href="{{$.Dashboard.Prefix}}/">Test</a>
        <a href="{{$.Dashboard.Prefix}}/perf">Perf</a>
        <a href="{{$.Dashboard.Prefix}}/perfgraph">Graphs</a>
    </nav>
    <div class="clear"></div>
  </header>
 
  <div class="page">
    <div id="graph_div" class="main-content graph-container">
    </div>

    <aside>
      <form>
        <div class="panel">
          <h1>Builders</h1>
            {{range $.Config.Builders}}
              <input type="checkbox" name="builder" value="{{.Name}}" {{if .Selected}}checked{{end}}>{{.Name}}</input><br>
            {{end}}
        </div>

        <div class="panel">
          <h1>Benchmarks</h1>
            {{range $.Config.Benchmarks}}
              <input type="checkbox" name="benchmark" value="{{.Name}}" {{if .Selected}}checked{{end}}>{{.Name}}</input><br>
            {{end}}
        </div>

        <div class="panel">
          <h1>Procs</h1>
            {{range $.Config.Procs}}
              <input type="checkbox" name="procs" value="{{.Name}}" {{if .Selected}}checked{{end}}>{{.Name}}</input><br>
            {{end}}
        </div>

        <div class="panel">
          <h1>Metrics</h1>
            {{range $.Config.Metrics}}
              <input type="checkbox" name="metric" value="{{.Name}}" {{if .Selected}}checked{{end}}>{{.Name}}</input><br>
            {{end}}
        </div>

        <div class="panel">
          <h1>Commits</h1>
          <b>From:</b>
          <select required name="commit-from">
            {{range $.Config.CommitsFrom}}
              <option {{if .Selected}}selected{{end}}>{{.Name}}</option>
            {{end}}
          </select>
          <b>To:</b>
          <select required name="commit-to">
            {{range $.Config.CommitsTo}}
              <option {{if .Selected}}selected{{end}}>{{.Name}}</option>
            {{end}}
          </select>
        </div>

	<input class="button" type="submit" value="Refresh" name="refresh"/>
        <a href="https://golang.org/wiki/PerfDashboard">Help</a>
      </form>
    </aside>
    <div class="clear"></div>
  </div>
</body>
</html>
